<div (window:resize)="onResize($event)">
  <!--  <div class="graph-type">
      <input name="options" type="radio"  [(ngModel)]="graphType" [value]="0"
             [checked]="graphType==0" (change)="RefreshGraph()" />
      <input name="options" type="radio"  [(ngModel)]="graphType" [value]="1"
             [checked]="graphType==1" (change)="RefreshGraph()"/>
      <input name="options" type="radio"  [(ngModel)]="graphType" [value]="2"
             [checked]="graphType==2" (change)="RefreshGraph()"/>
    </div>-->
  <div fxLayout="column" fxFlexFill>
    <div fxLayout="row" fxLayoutGap="32px" fxLayoutAlign="flex-start" class="container">
      <div fxFlex="0 0 300px" [class.hide-filter]="hideFilter" class="dontprint">
        <mat-card class="graph-categories">
          <div class="title-container">
            <mat-card-title class="filter-title">Filter</mat-card-title>
            <span class="example-spacer"></span>
            <button mat-button aria-label="Add Regulation Tab" [matMenuTriggerFor]="menu" class="add-button" [class.button-disabled]="!graphService.canAdd"><mat-icon>add_box</mat-icon></button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item *ngFor="let d of getMenuOptions()" (click)="addTab(d.id)">{{d.title}}</button>
            </mat-menu>
          </div>

          <div class="graph-tabs" fxLayout="column" fxFlexFill>
            <mat-tab-group [(selectedIndex)]="graphService.selectedTab" (selectedTabChange)="tabChanged()">
              <mat-tab *ngFor="let t of graphService.graphTabs">
                <ng-template mat-tab-label>
                  {{t.title}}
                  <button mat-button *ngIf="t.id != 'ISO'" matSuffix mat-icon-button aria-label="Remove Tab" (click)="graphService.removeTab(t)">
                    <mat-icon>close</mat-icon>
                  </button>
                </ng-template>
                <!--<div class="coverage-box" *ngIf="!t.isIso"><a class="fake-link" (click)="filterIsoCoverage(t)">ISO:</a> {{t.coverage.coverage}}, <a class="fake-link" (click)="filterMapped(t)">Mapped:</a> {{t.coverage.mapped}}, <span>Unique:</span> {{t.coverage.uniqueconnections}}</div>
            <div class="coverage-box" *ngIf="t.isIso">-</div>-->
                <div>
                  <mat-form-field class="filter-field">
                    <input matInput type="text" [lang]="t.viewSettings.selectedLang" attr.aria-label="" placeholder="Search" [(ngModel)]="t.searchValue" #filter3 (keyup)="searchable.filter(filter3.value, tree.treeModel, t)">
                    <button mat-button *ngIf="t.searchValue" matSuffix mat-icon-button aria-label="Clear Search" (click)="searchable.filter('', tree.treeModel, t); t.searchValue=''">
                      <mat-icon>close</mat-icon>
                    </button>
                  </mat-form-field>
                </div>

                <div>
                  <mat-checkbox *ngIf="t.anyExpanded" (change)="t.expandAll()" [checked]="true">Collapse All</mat-checkbox>
                  <mat-checkbox *ngIf="!t.anyExpanded" (change)="t.expandAll()" [checked]="false">Expand All</mat-checkbox>
                  <mat-checkbox *ngIf="t.anySelected" (change)="t.selectAll()" [checked]="true">Deselect All</mat-checkbox>
                  <mat-checkbox *ngIf="!t.anySelected" (change)="t.selectAll()" [checked]="false">Select All</mat-checkbox>
                </div>

                <div>
                  <mat-form-field *ngIf="t.doc.node.langs.length > 1">
                    <mat-label>Language:</mat-label>
                    <mat-select matNativeControl required [(value)]="t.viewSettings.selectedLang" (selectionChange)="t.refreshView()">
                      <mat-option *ngFor="let l of t.doc.node.langs" value="{{l}}">{{l}}</mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>

                <div class="tree-container">
                  <tree-root #tree [(state)]="t.state" [options]="t.options" [nodes]="t.nodes" (initialized)="t.treeModel = tree.treeModel" (stateChange)="t.parentTabTreeChanged()">
                    <ng-template #treeNodeWrapperTemplate let-node let-index="index">
                      <div #wrapper class="node-wrapper" [style.padding-left]="node.getNodePadding()">
                        <tree-node-expander title="Expand/Collapse Regulation" [node]="node"></tree-node-expander>
                        <input #checkBox attr.aria-labelledby="{{t.id + '.lbl.' + node.data.node.id}}"
                               id="{{t.id + '.cb.' + node.data.node.id}}"
                               class="tree-node-checkbox"
                               type="checkbox"
                               (click)="node.mouseAction('checkboxClick', $event)"
                               [checked]="node.isSelected"
                               [indeterminate]="node.isPartiallySelected"
                               (keydown)="onKeyDown(t, node, $event)"
                               [attr.aria-expanded]="node.visibleChildren.length ? (node.isExpanded?'true':'false') : null" />
                        <div class="node-content-wrapper"
                             [class.dummystyle]="bindTogether(node, wrapper, svgbg, checkBox, t)"
                             [class.node-content-wrapper-active]="node.isActive"
                             [class.node-content-wrapper-focused]="node.isFocused"
                             (click)="node.mouseAction('click', $event)"
                             [style.background-color]="t.displayLinks|getNodeColor:t:node" id="{{t.id + '.lbl.' + node.data.node.id}}" >
                          <div class="node-content-icon"><mat-icon class="node-content-icon" aria-hidden="false" title="{{node|getNodeIconAlt:t}}" attr.aria-label="{{node|getNodeIconAlt:t}}">{{t.displayLinks|getNodeIcon:t:node}}</mat-icon></div>
                          <span [lang]="t.viewSettings.selectedLang">
                            <span *ngIf="!node.data.node.hyperlink" [innerHTML]="t.viewSettings|injectHighlightSection:node.data"></span>
                            <a *ngIf="node.data.node.hyperlink" (mousedown)="openTab(node.data.node.hyperlink)" class="fake-link" target="_blank" href="{{node.data.node.hyperlink}}" [innerHTML]="t.viewSettings|injectHighlightSection:node.data"></a>
                            <span [innerHTML]="t.viewSettings|injectHighlightBody:node.data"></span>
                          </span>
                        </div>
                      </div>
                    </ng-template>
                  </tree-root>
                </div>
              </mat-tab>
            </mat-tab-group>
          </div>
        </mat-card>
      </div>
      <div class="graph-columns" margin-right="0px">
          <mat-card class="fill-graph">
            <div class="settings-row dontprint">
              <div class="settings-row" fxFlex="1 0 auto" fxLayout="row" fxFlexFill>
                <span class="example-spacer"></span>
                <div class="setting">
                  <mat-label>Zoom</mat-label>
                  <mat-slider aria-label="Zoom" [(value)]="graphService.visualZoom" min="0.5" max="1" step="0.05" (input)="onSliderChange($event)"></mat-slider>
                </div>
                <div class="setting">
                  <mat-label>Sankey Diagram</mat-label>
                  <mat-slide-toggle aria-label="Visual Style" [(ngModel)]="graphService.visualStyle" (toggleChange)="onStyleChange($event)"></mat-slide-toggle>
                </div>
                <!--<span class="example-spacer"></span>-->
              </div>
            </div>
            <div class="scroll-parent">
              <div class="scroll-client" fxFlex="1 0 auto">
                <!--        <div fxLayout="row" fxLayoutGap="80px" fxLayoutAlign="flex-start">-->
                <div class="graph-column" *ngFor="let t of graphService.graphTabs">
                  <div class="zoom-viewport" [style.transform]="'scale(' + graphService.visualZoom + ')'" [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% / ' + graphService.visualZoom + ')')">
                    <div class="column-header">
                      <h3 class="share-header" *ngIf="t.isIso"><a href="https://www.iso.org/standard/71670.html" target="_blank">ISO</a>/<a href="https://webstore.iec.ch/publication/65597" target="_blank">IEC</a> 27701</h3>
                      <h3 class="share-header" *ngIf="!t.isIso">{{t.title}}</h3>
                      <!--            <div><a routerLink="/doctypes/{{t.title}}"><h3>{{t.title}}</h3></a>
                        <div>
                          <mat-checkbox (change)="t.column.expandAll()" [checked]="t.column.anyExpanded">{{t.column.anyExpanded ? 'Collapse' : 'Expand'}} All</mat-checkbox>
                        </div></div>-->

                      <div class="share-header">
                        <mat-form-field *ngIf="t.doc.node.langs.length > 1" hideRequiredMarker>
                          <mat-label>Language:</mat-label>
                          <mat-select matNativeControl required [(value)]="t.viewSettings.selectedLang" (selectionChange)="t.refreshView()">
                            <mat-option *ngFor="let l of t.doc.node.langs" value="{{l}}">{{l}}</mat-option>
                          </mat-select>
                        </mat-form-field>
                      </div>
                    </div>
                    <tree-root #tree [(state)]="t.column.state" [options]="t.column.options" [nodes]="t.column.nodes" (initialized)="setup(t.column, tree); t.parentTabTreeChanged()" (activate)="activateNode(t, $event)" (deactivate)="t.columnTabTreeChanged()" (toggleExpanded)="t.columnTabTreeChanged()">
                      <ng-template #treeNodeWrapperTemplate let-node let-index="index">
                        <div #wrapper class="node-wrapper" [style.padding-left]="node.getNodePadding()" id="{{t.id + '.cb.' + node.data.node.id}}" tabindex="0" (keydown)="onKeyDown(t.column, node, $event)">
                          <tree-node-expander [node]="node" *ngIf="t.isAll"></tree-node-expander>
                          <div class="node-content-wrapper"
                               [class.dummystyle]="bindTogether(node, wrapper, svgbg, wrapper, t.column)"
                               [class.node-content-wrapper-active]="node.isActive"
                               [class.node-content-wrapper-focused]="node.isFocused"
                               (click)="node.mouseAction('click', $event)"
                               [style.background-color]="t.column.displayLinks|getNodeColor:t.column:node"
                               [attr.aria-expanded]="node.visibleChildren.length ? (node.isExpanded?'true':'false') : null">
                            <div class="node-content-icon"><mat-icon aria-hidden="false" title="{{node|getNodeIconAlt:t.column}}" attr.aria-label="{{node|getNodeIconAlt:t.column}}">{{t.column.displayLinks|getNodeIcon:t.column:node}}</mat-icon></div>
                            <span [lang]="t.viewSettings.selectedLang">
                              <span *ngIf="!node.data.node.hyperlink">{{node|getSection:t.viewSettings}}</span>
                              <a *ngIf="node.data.node.hyperlink" (mousedown)="openTab(node.data.node.hyperlink)" class="fake-link" target="_blank" href="{{node.data.node.hyperlink}}">{{node|getSection:t.viewSettings}}</a>
                              <span>{{node|getBody:t.viewSettings}}</span>
                              <span *ngIf="node.data.connectedTo.length" class="visuallyhidden">{{node|getConnectionsText:t.viewSettings}}</span>
                            </span>
                            <div *ngIf="node.data.node.notes.length" class="notes-list">
                              <span class="notes-header">Notes:</span>
                              <ul>
                                <li *ngFor="let note of node.data.node.notes" [lang]="t.viewSettings.selectedLang" [innerHTML]="t.viewSettings|getCommentText:node.data:note"></li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </ng-template>
                    </tree-root>
                  </div>
                </div>
                <svg #svgbg class="svg-background">
                  <defs>
                    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                      <path d="M0,0 L0,6 L9,3 z" fill="#000" />
                    </marker>
                  </defs>
                  <g *ngIf="!graphService.visualStyle">
                    <!-- Legacy visual style -->
                    <g *ngFor="let t of graphService.graphTabs">
                      <g *ngFor="let l of t.column.displayLinks">
                        <!-- <line class="svg-line-click" (click)="clickedLink(l)" [attr.x1]="l.x3" [attr.x2]="l.x4" [attr.y1]="l.y2" [attr.y2]="l.y2" marker-end="url(#arrow)"></line>
                          <line class="svg-line-click" (click)="clickedLink(l)" [attr.x1]="l.x1" [attr.x2]="l.x3" [attr.y1]="l.y1" [attr.y2]="l.y2"></line>-->
                        <line class="svg-line-visible" [class.svg-line-active]="l.weight > 1" [attr.x1]="l.x3" [attr.x2]="l.x4" [attr.y1]="l.y2" [attr.y2]="l.y2" marker-end="url(#arrow)"></line>
                        <line class="svg-line-visible" [class.svg-line-active]="l.weight > 1" [attr.x1]="l.x1" [attr.x2]="l.x3" [attr.y1]="l.y1" [attr.y2]="l.y2"></line>
                      </g>
                    </g>
                  </g>
                  <g *ngIf="graphService.visualStyle">
                    <!-- Smooth visual style -->
                    <g *ngFor="let t of graphService.graphTabs">
                      <g *ngFor="let l of t.column.displayLinks">
                        <path class="svg-line-visible"
                              [class.svg-line-active]="l.weight > 1"
                              [attr.d]="l.d"
                              [attr.fill]="l.color"
                              fill-opacity="50%"
                              stroke-width="0pt" />
                      </g>
                    </g>
                  </g>
                </svg>
              </div>
            </div>
          </mat-card>
      </div>
      <button mat-button class="filter-pin dontprint" [class.filter-hidden]="hideFilter" (click)="toggleShowFilter()"><mat-icon>push_pin</mat-icon><span class="visuallyhidden">Open/Close Filter</span></button>
      <button mat-button class="error-icon" [class.error-hidden]="!graphService.anyErrors" (click)="dialogService.openDialog('errors')"><mat-icon>error</mat-icon><span class="visuallyhidden">Show Errors</span></button>
    </div>
  </div>
</div>
